<template>
    <view class="page">

        <view class='feedback-title'>
            <text>请输入商品标题</text>
        </view>
        <view class="feedback-body">
            <textarea placeholder="商品标题最多30字符" v-model="requestData.name" class="feedback-textare" />
        </view>
        <view class='feedback-title'>
            <text>商品描述(选填)</text>
        </view>
        <view class="feedback-body feedback-uploader" style="background: #fff;min-height: 200px;padding: 0;">
            <uni-richtext :richList.sync="richList" :uploadUrl="uploadUrl" style="z-index: 100;"></uni-richtext>
        </view>
        <view class='feedback-title'>
            <text>商品售价(元)</text>
        </view>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <input  type="number" placeholder="请输入售价"  v-model="requestData.price" />
            </view>
        </view>
        <view class='feedback-title'>
            <text>库存数量</text>
        </view>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <input  type="number" placeholder="请输入库存数量" v-model="requestData.number"  />
            </view>
        </view>
        <view class='feedback-title'>
            <text>商品封面(必填，商品封面必须上传一份)</text>
        </view>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <upload-images :url="uploadUrl" :count="1" :length="1"  @changes="getFengmian"></upload-images>
            </view>
        </view>
        <view class='feedback-title'>
            <text>商品相册(选填，商品相册可以上传可以不上传)</text>
        </view>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <upload-images :url="uploadUrl" :count="9" :length="9"  @changes="getXiangce"></upload-images>
            </view>
        </view>
        <view class='feedback-title'>
            <text></text>
        </view>

        <button class="feedback-submit" @tap="addGoods">发布商品</button>
    </view>
</template>

<script>
    import uniRichtext from "@/components/qiyue-richtext/uni-richtext.vue"
    import uploadImages from '@/components/upload-images.vue'
    import { HOST, upFiles, goods } from '../../common/config'
    import { mapState, mapMutations } from 'vuex';

    export default {
        components: { uniRichtext, uploadImages },
        data() {
            return {
                showUpFile:true,
                richList: [],
                uploadUrl: HOST + upFiles.PostUpFiles.url,//传给子组件，上传接口地址
                requestData:{
                    name:'',//商品标题
                    desc:'',//商品描述
                    cover:0,//商品封面id
                    price:0.0,//商品价格
                    number:1,//商品库存数量
                    picture:[],//商品相册
                }
            }
        },
        //商品描述
        watch:{
            richList:function (newValue,oldValue) {
                // console.log('商品描述',newValue);  // style,tagType,value
                let str = '<div style="text-align:center;">';
                newValue.map((one) => {
                    switch (one.tagType) {
                        case 'image':
                            str += `<img style="width:100%;" src="${one.value}">`;
                            break;
                        case 'video':
                            str += `<video style="width:100%;" src="${one.value}" controls="controls">对不起，你的设备不支持视频播放器</video>`;
                            break;
                        default:
                            str += `<${one.tagType} style="${one.style}">${one.value}</${one.tagType}>`;
                            break;
                    }
                });
                str += '</div>';
                this.requestData.desc = str;
                console.log(this.requestData);
            }
        },
        onLoad() {
        },
        methods: {
            //上传了图片得到了封面id
            getFengmian(data){

                if(data.length > 0) {
                    this.requestData.cover = data[0].src.id
                } else {
                    this.requestData.cover = 0
                }
                console.log('商品封面',data,this.requestData);
            },
            //上传了图片得到了相册
            getXiangce(data){
                this.requestData.picture = [];
                data.map((one) => {
                    this.requestData.picture.push(one.src.id);
                })
                console.log('商品相册',data,this.requestData);
            },

            async addGoods(){
                if (this.requestData.name === '') {
                    this.msg('商品名不能为空!');
                    return;
                }
                if (this.requestData.desc === '') {
                    this.msg('商品描述不能为空!');
                    return;
                }
                if (this.requestData.cover === 0) {
                    this.msg('请上传商品封面!');
                    return;
                }
                if (this.requestData.price === 0.0) {
                    this.msg('请设置商品价格!');
                    return;
                }
                if (this.requestData.number <= 0) {
                    this.msg('商品库存有误!');
                    return;
                }
                await this.$api.MyRequest(goods.PostGoods.url, goods.PostGoods.method, this.requestData)
                    .then((res) => {
                        this.msg('新增商品成功！');
                    })
                    .catch((e) => {
                        this.msg('新增商品失败！');
                    });
                uni.navigateBack();
            }
        },
    }
</script>

<style>
    @font-face {
        font-family: uniicons;
        font-weight: normal;
        font-style: normal;
        src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
    }
    page {
        background-color: #EFEFF4;
    }
    view{
        font-size: 28upx;
    }
    .input-view {
        font-size: 28upx;
    }
    .close-view{
        text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
    }
    /* 上传 */
    .uni-uploader {
        flex: 1;
        flex-direction: column;
    }
    .uni-uploader-head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .uni-uploader-info {
        color: #B2B2B2;
    }
    .uni-uploader-body {
        margin-top: 16upx;
    }
    .uni-uploader__files {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .uni-uploader__file {
        margin: 10upx;
        width: 210upx;
        height: 210upx;
    }
    .uni-uploader__img {
        display: block;
        width: 210upx;
        height: 210upx;
    }
    .uni-uploader__input-box {
        position: relative;
        margin:10upx;
        width: 208upx;
        height: 208upx;
        border: 2upx solid #D9D9D9;
    }
    .uni-uploader__input-box:before,
    .uni-uploader__input-box:after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #D9D9D9;
    }
    .uni-uploader__input-box:before {
        width: 4upx;
        height: 79upx;
    }
    .uni-uploader__input-box:after {
        width: 79upx;
        height: 4upx;
    }
    .uni-uploader__input-box:active {
        border-color: #999999;
    }
    .uni-uploader__input-box:active:before,
    .uni-uploader__input-box:active:after {
        background-color: #999999;
    }
    .uni-uploader__input {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    /*问题反馈*/
    .feedback-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20upx;
        color: #8f8f94;
        font-size: 28upx;
    }
    .feedback-star-view.feedback-title {
        justify-content: flex-start;
        margin: 0;
    }
    .feedback-quick {
        position: relative;
        padding-right: 40upx;
    }
    .feedback-quick:after {
        font-family: uniicons;
        font-size: 40upx;
        content: '\e581';
        position: absolute;
        right: 0;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .feedback-body {
        background: #fff;
    }
    .feedback-textare {
        height: 200upx;
        font-size: 34upx;
        line-height: 50upx;
        width: 100%;
        box-sizing: border-box;
        padding: 20upx 30upx 0;
    }
    .feedback-input {
        font-size: 34upx;
        height: 50upx;
        min-height: 50upx;
        padding: 15upx 20upx;
        line-height: 50upx;
    }
    .feedback-uploader {
        padding: 22upx 20upx;
    }
    .feedback-star {
        font-family: uniicons;
        font-size: 40upx;
        margin-left: 6upx;
    }
    .feedback-star-view {
        margin-left: 20upx;
    }
    .feedback-star:after {
        content: '\e408';
    }
    .feedback-star.active {
        color: #FFB400;
    }
    .feedback-star.active:after {
        content: '\e438';
    }
    .feedback-submit {
        background: #FFFFFF;
        color: #fa436a;
        margin: 20upx;
    }
</style>
